$(function () {
    var index = 0;
    var timer;
    //自动轮播和并开启or停止定时器
    function autoplay() { //创建设置定时器的方法
        timer = setInterval(function () {
            index++; //index递增
            if (index === 4) index = 0; //设置循环
            $(".group>li").eq(index).addClass("current").siblings().removeClass("current");
            //给索引值为index的li加上类 current并去掉其余的current;
            $(".slide>li").eq(index).addClass("now").siblings().removeClass("now");
            //给索引值为index的li加上类 now 并去掉其余的current
        }, 3000);
    }
    autoplay(); //调用函数，开启定时器
    $(".group>li").mouseenter(function () { //鼠标移入，清空定时器
        clearInterval(timer);
    });
    $(".group>li").mouseleave(function () { //鼠标移出，开启定时器
        autoplay();
    });

    $(".slide>li").mouseenter(function () { //鼠标移入
        slideindex = $(this).index(); //获取slide li的索引值
        $(".group>li").eq(slideindex).addClass("current").siblings().removeClass("current");
        //给li加上current，作用：把display 改成block
        $(this).mouseover(function () { //鼠标悬停
            $(".slide>li").eq(slideindex).addClass("now").siblings().removeClass("now");
            //把now的颜色样式交给this.li
            clearInterval(timer); //停止定时器
        })
    });

    ////左右控件效果的实现
    $(".banner>span").mouseover(function () { //鼠标悬停在左右控件上
        clearInterval(timer); //停止定时器
    });

    $(".left").click(function () {
        slideindex--;
        if (slideindex === -1) slideindex = 3;
        $(".group>li").eq(slideindex).addClass("current").siblings().removeClass("current");
        $(".slide>li").eq(slideindex).addClass("now").siblings().removeClass("now");
    });

    $(".right").click(function () {
        slideindex++;
        if (slideindex === 4) slideindex = 0;
        $(".group>li").eq(slideindex).addClass("current").siblings().removeClass("current");
        $(".slide>li").eq(slideindex).addClass("now").siblings().removeClass("now");
    });

});
// <!-- banner 轮播图的渲染开始 -->
$.get("./goodsAndShoppingCart/bannerGet.php", function (data) {
 console.log(data);
 let str1=""
 for(let i=0;i<5;i++){
     str1=`
            <li class="current"><img src="${data[i].img}" alt=""></li>
        `
    $(".bg .group").append(str1);
 }
}, 'json');

